import * as React from 'react';
import { View, Text, Animated, requireNativeComponent, ScrollView, FlatList, StyleSheet, ViewStyle, Dimensions, TouchableNativeFeedback, TextStyle, TouchableOpacity, } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import connect from '../../redux/connect';
import * as Nav from '../../redux/ui/nav';
import * as Common from '../../redux/model/common';

const { width, height } = Dimensions.get('window');

interface PageProps {
    navigation: {
        // getParam: () => any,
    };
}

interface PageState {
    max: number;
}

class Test extends React.PureComponent<PageProps
    & Nav.ConnectedUINavDispatch
    & Common.ConnectedModelCommonDispatch
    , PageState> {

    private tmpData: number[] = [];
    private max: number = -1;

    constructor(props: any) {
        super(props);
        for (let i = 0; i < 100; i++) {
            this.tmpData.push(i);
        }
        this.state = {
            max: this.max,
        }
    }

    private renderItem = (data: { item: number, index: number }) => {
        this.max = Math.max(this.max, data.item);
        return (
            <View style={styles.item}>
                <Text>Item {data.item}</Text>
                <TouchableOpacity
                    onPress={() => this.setState({ max: this.max })}
                >
                    <View>
                        <Text>Press Me</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    renderLeftActions = (progress: any) => {
        const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [-width, 0],
        });
        return (
            <View style={[styles.view]}>
                <Animated.View
                    style={[
                        styles.view2,
                        { transform: [{ translateX: trans }], flex: 1 }
                    ]}
                >
                    <Text>adlfkjaslfkjdslkfj</Text>
                    <TouchableOpacity
                        onPress={() => this.props._u_nav_navTo('Test2', { a: 'isApple', b: true, c: 0x00FF00, u: null })}
                    >
                        <View>
                            <Text>Navvvvvvvvvvvvvvv</Text>
                        </View>
                    </TouchableOpacity>
                    <ScrollView
                        horizontal={true}
                    >
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                    </ScrollView>
                    <Text>adlfkjaslfkjdslkfj</Text>
                    <Text>adlfkjaslfkjdslkfj</Text>
                    <Text>adlfkjaslfkjdslkfj</Text>
                    <Text>adlfkjaslfkjdslkfj</Text>
                    <Text>adlfkjaslfkjdslkfj</Text>
                </Animated.View>
            </View>
        );
    };

    renderRightActions = (progress: any) => {
        const trans = progress.interpolate({
            inputRange: [0, 1],
            outputRange: [width, 0],
        });
        return (
            <View style={[styles.view]}>
                <Animated.View
                    style={[
                        styles.view3,
                        { transform: [{ translateX: trans }], flex: 1 }
                    ]}
                >
                    <Text>view 3 asldfkjasldfkj dsaf</Text>
                    <TouchableOpacity
                        onPress={() => {
                            this.props._m_common_init();
                        }}
                    >
                        <View>
                            <Text>http</Text>
                        </View>
                    </TouchableOpacity>
                    <ScrollView
                        horizontal={true}
                    >
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                        <View style={styles.subItem} />
                    </ScrollView>
                    <Text>view 3 asldfkjasldfkj dsaf</Text>
                    <Text>view 3 asldfkjasldfkj dsaf</Text>
                    <Text>view 3 asldfkjasldfkj dsaf</Text>
                    <Text>view 3 asldfkjasldfkj dsaf</Text>
                </Animated.View>
            </View>
        );
    }

    render() {
        return (
            <Swipeable
                renderLeftActions={this.renderLeftActions}
                renderRightActions={this.renderRightActions}
                overshootLeft={false}
            >
                <View style={[styles.view, styles.view1]}>
                    <Text>Max Render:{this.state.max}</Text>
                    <FlatList
                        pagingEnabled={true}
                        data={this.tmpData}
                        keyExtractor={item => item + ''}
                        renderItem={this.renderItem}
                    />
                </View>
            </Swipeable>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        width, height,
    } as ViewStyle,
    view1: {
        backgroundColor: 'red',
    } as ViewStyle,
    view2: {
        backgroundColor: 'yellow',
    } as ViewStyle,
    view3: {
        backgroundColor: 'green',
    } as ViewStyle,
    item: {
        height,
        padding: 10,
        borderColor: 'black',
        borderWidth: 1,
        borderRadius: 10,
    } as ViewStyle,
    subItem: {
        width: 100,
        height: 100,
        backgroundColor: 'pink',
        borderRadius: 50,
    } as ViewStyle,
    txt: {
        textAlign: 'right',
        width: '100%',
    } as TextStyle,
});

export default connect(null, null, Test, {});